<template>
	<div>
		<!-- 面包屑导航 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>小程序管理</el-breadcrumb-item>
			<el-breadcrumb-item>店铺列表</el-breadcrumb-item>
		</el-breadcrumb>
		<el-row>
			<el-button size="small" type="primary" @click="addBanner">新增</el-button>
		</el-row>
		
		<div class="shopStyle">
			  <el-table
			    :data="tableData"
			    style="width: 100%">
			    <el-table-column type="expand">
			      <template slot-scope="props">
			        <el-form label-position="left" inline class="demo-table-expand">
			          <el-form-item label="简介:">
			            <span>{{ props.row.introduction }}</span>
			          </el-form-item>
								<el-form-item label="详情:">
								  <span>{{ props.row.details }}</span>
								</el-form-item>
			        </el-form>
			      </template>
			    </el-table-column>
		
			    <el-table-column label="店铺ID" prop="id" width="80"></el-table-column>
			    <el-table-column label="图片">
						<template slot-scope="scope">
							<el-image style="width: 100px; height: 100px" :src= "scope.row.image"></el-image>
						</template>
			    </el-table-column>
			    <el-table-column label="分类名称" prop="min_class.name"></el-table-column>
			    <el-table-column label="访问量" prop="traffic"></el-table-column>
			    <el-table-column label="热度" prop="heat"></el-table-column>
			    <el-table-column label="人均" prop="capita"></el-table-column>
			    <el-table-column label="价格" prop="price"></el-table-column>
			    <el-table-column label="状态">
						<template slot-scope="scope">
							  <span v-if="scope.row.status == 1">启用</span>
							  <span v-if="scope.row.status == 2">禁用</span>
						</template>
					</el-table-column>
					<el-table-column fixed="right" label="操作" width="100">
						<template slot-scope="scope">
							<el-button @click="saveShop(scope.row)" type="text" size="small">编辑</el-button>
							<el-button @click="delShop(scope.row)" type="text" size="small">删除</el-button>
						</template>
					</el-table-column>
			  </el-table>
		</div>


		<el-dialog title="店铺添加" :visible.sync="dialogFormVisible">
			<el-form :model="shopData">
				<el-form-item label="名称" :label-width="formLabelWidth">
					<el-input v-model="shopData.name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="图片" :label-width="formLabelWidth">
					<el-upload action="http://openpay.duolaibei.com/admin/upload/upload" list-type="picture-card"
					  :on-remove="handleRemove" :on-success = "upsuccess">
						<i class="el-icon-plus"></i>
					</el-upload>
					<el-dialog :visible.sync="imgShow">
						<img width="100%" :src="shopData.image" alt="">
					</el-dialog>
				</el-form-item>
				<el-form-item label="分类" :label-width="formLabelWidth">
					<el-select v-model="shopData.classID" placeholder="请选择">
					    <el-option
					      v-for="item in classList"
					      :key="item.id"
					      :label="item.name"
					      :value="item.id">
					    </el-option>
					  </el-select>
				</el-form-item>
				<el-form-item label="简介" :label-width="formLabelWidth">
					<el-input
					  type="textarea"
					  :rows="2"
					  placeholder="请输入内容"
					  v-model="shopData.introduction">
					</el-input>
				</el-form-item>
				<el-form-item label="详情" :label-width="formLabelWidth">
					<!-- <el-input
					  type="textarea"
					  :rows="2"
					  placeholder="请输入内容"
					  v-model="shopData.details">
					</el-input> -->
					<editor-bar v-model="detail" :isClear="isClear" @change="change"></editor-bar>
				</el-form-item>
				<el-form-item label="访问量" :label-width="formLabelWidth">
					<el-input v-model="shopData.traffic" autocomplete="off" placeholder="访问量"></el-input>
				</el-form-item>
				<el-form-item label="热度" :label-width="formLabelWidth">
					<el-input v-model="shopData.heat" autocomplete="off" placeholder="热度"></el-input>
				</el-form-item>
				<el-form-item label="人均" :label-width="formLabelWidth">
					<el-input v-model="shopData.capita" autocomplete="off" placeholder="人均"></el-input>
				</el-form-item>
				<el-form-item label="价格" :label-width="formLabelWidth">
					<el-input v-model="shopData.price" autocomplete="off" placeholder="价格"></el-input>
				</el-form-item>
				<el-form-item label="状态" :label-width="formLabelWidth">
					 <el-radio v-model="shopData.status" label="1">启用</el-radio>
					 <el-radio v-model="shopData.status" label="2">禁用</el-radio>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="createShop">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	
import EditorBar from '../../../tool/wangEnduit'
	export default {
		components: { EditorBar },
		data() {
			return {
				tableData: [],
				classList:[],
				shopData: {
					name : '',
					image : '',
					classID : '',
					introduction : '',
					details : '',
					traffic : '',
					heat : '',
					capita : '',
					price : '',
					status : '',
				},
				dialogFormVisible: false,
				imgShow: false,
				dialogImageUrl: '',
				formLabelWidth: '120px',
				isClear: false,
				detail: ''
			};
		},
		created() {
			this.getClass();
			this.getShop();
		},
		methods: {
			//添加shop
			addBanner() {
				this.dialogFormVisible = true;
			},
			getShop(){
				let that = this;
				this.$axios({
					url : '/admin/minApp/getShop',
					data : {},
					success(res){
						if(res.data.code == 200){
							that.tableData = res.data.content.data;
						}
					}
				});
			},
			getClass(){
				let that = this;
				this.$axios({
					url : '/admin/minApp/getClass',
					data : {},
					success(res){
						if(res.data.code == 200){
							that.classList = res.data.content;
						}
					}
				});
			},
			createShop(){
				let that = this;
				this.$axios({
					url : '/admin/minApp/addShop',
					data : this.shopData,
					success(res){
						if(res.data.code == 200){
							that.dialogFormVisible = false;
							that.$message({
							    type: 'success',
							    message: '添加成功'
							});
						}else{
							that.dialogFormVisible = false;
							that.$message({
							    type: "warning",
							    message: '添加失败'
							});
						}
					}
				});
			},
			saveShop(param){
				this.dialogFormVisible = true;
				let that = this;
				this.$axios({
					url : '/admin/minApp/getShopInfo',
					data : {
						shopID : param.id
					},
					success(res){
						console.log(res.data.content);
						that.shopData = res.data.content
					}
				});
			},
			delShop(param){
				let that = this;
				this.$axios({
					url : "/admin/minApp/delShop",
					data : {
						shopID : param.id
					},
					success(res){
						if(res.data.code == 200){
							that.$message({
							    type: 'success',
							    message: '删除成功'
							});
						}else{
							that.$message({
							    type: "warning",
							    message: '删除失败'
							});
						}
					}
				});
			}, 
		 change(val) {
		    console.log(val)
				this.shopData.details = val;
				//console.log(this.shopData)
			},
			//upload
			upsuccess(response, file, fileList){
				if(response.code == 200){
					this.shopData.image = response.content.path;
					this.$message({
					    type: 'success',
					    message: response.msg
					});
				}else{
					this.$message({
					    type: "warning",
					    message: response.msg
					});
				}
			},
			handleRemove(file, fileList) {
				this.shopData.image = '';
			},
		},
	};
</script>
<style scoped>
	.shopStyle{
		margin-top: 20px;
	}
</style>
